<script lang="tsx" setup>
import { reactive, ref, watch } from 'vue'
import { useTablePage1 } from '@/hooks/web'
import { useSearch } from '@/hooks/component'
import { getLoopListAPI, getDetailsAPI } from '@/api/asset/index'
import { HttpCodeEnum } from '@packages/share/enums'
import { assignObject } from '@/utils/object'
import Advanced from './advanced-search.vue'
const emit = defineEmits(['detailItem'])
// 选择条件
const props = defineProps({
  select: {
    type: Object,
    required: true,
    default: () => { }
  },
  country: {
    type: String,
    default: ''
  },
  province: {
    type: String,
    default: ''
  }
})
// 高级搜索显示状态
const visible = ref(false)
// 基础选择参数
const selectinfo = reactive({
  isSenior: '0',
  ...props.select,
  country: props.country,
  province: props.province,
  searchValue: '', //搜索
})
// 参数模板
const selectForm = reactive({
  isSenior: '',
  ip: '',
  port: '',
  vendor: '',
  deviceType: '',
  protocol: '',
  productModel: '',
  service: '',
  version: '',
  vulCount: '',
  creatBeginTime: '',
  createEndTime: '',
  country: '',
  province: '',
  city: '',
})
const { table, page, ruleForm, getRecords } = useTablePage1(getLoopListAPI, {
  ruleForm: copyAndUpdateObject(selectinfo, selectForm),
  isMounted: true
})
const { handleSearch } = useSearch('advancedRef', ruleForm, getRecords)

// 表格布局
const ruleTable = reactive({
  selections: [],
  columns: [
    { label: 'IP', prop: 'ip' },
    { label: '产品名称', prop: 'productName' },
    { label: '产品厂商', prop: 'vendor' },
    { label: '设备类型', prop: 'deviceType' },
    { label: '产品型号', prop: 'productModel' },
    { label: '服务', prop: 'service' },
    { label: '端口号', prop: 'portCount' },
    { label: '漏洞数', prop: 'vulCount' },
    { label: '数据来源', prop: 'source' },
    { label: '更新时间', prop: 'updateTime' },
    {
      label: '操作',
      width: 200,
      render: (item: any) => (
        <span
          class="click"
          onClick={() => {
            handleDetaileClick(item)
          }}
        >
          详情
        </span>
      )
    }
  ]
})

// 详情点击
const handleDetaileClick = (item: any) => {
  getDetailsAPI(item.row.id).then((res) => {
    const { code, data } = res.data
    if (code === HttpCodeEnum.SUCCESS) {
      emit('detailItem', data)
    }
  })
}
// 高级搜索提交
const Submit = (formdata: any) => {
  assignObject(ruleForm, formdata)
  getRecords()
}
watch(props.select, (newSelect) => {
  assignObject(ruleForm, newSelect)
  !visible.value && getRecords()
})
watch(() => props.country, (newCountry) => {
  ruleForm.country = newCountry
  !visible.value && getRecords()
})
watch(() => props.province, (newProvince) => {
  ruleForm.province = newProvince
  !visible.value && getRecords()
})
// 高级搜索置空普通搜素栏
watch(() => visible.value, (newVisible) => {
  if(newVisible){
    ruleForm.searchValue=''
  }
})
function copyAndUpdateObject(source, target) {
  // 遍历源对象的属性
  for (const key in source) {
    if (source.hasOwnProperty(key)) {
      // 如果目标对象有这个属性，更新它
      if (target.hasOwnProperty(key)) {
        target[key] = source[key];
      } else {
        // 如果目标对象没有这个属性，添加它
        target[key] = source[key];
      }
    }
  }
  return target;
}

</script>
<template>
  <div class="jm-bg-color jm-container">
    <div class="flex justify-between jm-mb">
      <div>
        <!-- 按钮插槽 -->
        <slot name="button"></slot>
      </div>
      <jmp-search v-model="ruleForm.searchValue" advanced v-model:visible="visible"
        @change="handleSearch('searchValue')" placeholder="请输入搜索词(服务)" />
    </div>
    <!-- 高级搜索 -->
    <Advanced v-model:visible="visible" :topic="props.select.topic" @formsubmit="Submit"></Advanced>
    <!-- 列表 -->
    <jmp-table :data="table.records" :columns="ruleTable.columns" :loading="table.loading"
      @selection-change="ruleTable.selections = $event" />
    <!-- 分页 -->
    <jmp-pagination v-model:page="page.pageNum" v-model:limit="page.pageSize" v-model:total="page.total" />
  </div>
</template>

<style lang="scss" scoped></style>
